

<*
* 互动管理员
* interactAdmin
* edit by ZHANGKE
*>

<template>
    <div class="interact-admin">
        <!--互动管理员 interactAdmin -->

        <el-form :inline="true" :model="pForm" class="search">
            <el-form-item label="昵称">
                <el-input v-model="pForm.nickName" placeholder="查询昵称" clearable></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="mini" class="search-btn" @click="searchPerson">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-switch
                        v-model="allowScanToAdd"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="允许扫码添加">
                </el-switch>
            </el-form-item>

            <el-form-item style="float: right;">
                <el-button type="primary" @click="addPerson">添加管理员</el-button>
            </el-form-item>
        </el-form>

        <div class="container" v-if="personListTotal > 0">
            <el-card v-for="(person, index) in personList" :key="index" @click.native="selectCard(person, index)">
                <el-row type="flex" justify="space-between" class="card-header">
                    <el-col :span="12">
                        <img :src="person.avatar" v-if="person.avatar" class="avatar"  alt="头像"/>
                        <i class="el-icon-user-solid" v-else></i>
                        <span class="nickname">{{person.userName}}</span>
                    </el-col>
                    <el-col :span="2">
                        <i class="el-icon-user"></i>
                    </el-col>
                </el-row>
                <div class="card-content">
                    <el-form inline>
                        <el-form-item v-for="(item, dIndex) in person.detail" :key="dIndex" :label="item.label+'：'">
                            <div v-if="!Array.isArray(item.value)" class="content-info" >{{item.value}}</div>
                            <div :span="20" v-else v-for="(ii,i) in item.value" :key="i"  class="content-info">
                                {{ii}}</div>
                        </el-form-item>
                    </el-form>

<!--                    <div v-for="(item, dIndex) in person.detail" :key="dIndex" class="content-row">-->

<!--                        -->
<!--                        <label :span="4" class="content-label">{{item.label}}:</label>-->
<!--                        <span :span="20" class="content-info">{{item.value}}</span>-->
<!--                    </div>-->
                </div>
                <div class="card-footer">
                    <el-button type="text" @click.stop="openDetailDialog(person)">查看</el-button>
                    <div class="devide-line"></div>
                    <el-button type="text" @click.stop="openPermissionDialog(person)">权限</el-button>
                    <div class="devide-line"></div>
                    <el-button type="text" @click.stop="deleteItem(person)">删除</el-button>
                </div>
            </el-card>
        </div>

        <el-pagination
                v-if="personListTotal > 0"
                class="pagination-part"
                background
                @current-change="changePage"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="personListTotal">
        </el-pagination>

        <div class="no-data"   v-else>
            <img :src="noDataImg" alt="无数据" />
            <div>没有找到符合条件的数据，换个条件试试</div>
        </div>



        <modal :visible="detailDialogVisible" :width="850" @close="detailDialogVisible = false" class="data-modal" title="查看该管理员信息">
            <div class="content">
                <div class="content-body flex">
                    <el-card class="box-card" >
                        <h2>{{curAdmin.saveMountUserNum}}</h2>
                        <span>认购数据录入</span>
                    </el-card>
                    <el-card class="box-card">
                        <h2>{{curAdmin.examCount}}</h2>
                        <span>消息审核</span>
                    </el-card>
                    <el-card class="box-card">
                        <h2>{{curAdmin.cashCount}}</h2>
                        <span>兑奖</span>
                    </el-card>
                </div>

                <div class="content-footer">
                    <el-button type="primary" plain @click="detailDialogVisible = false">关闭</el-button>
                </div>
            </div>
        </modal>
        <modal :visible="permissionDialogVisible" :width="850" @close="permissionDialogVisible = false" class="data-modal" title="修改权限">
            <div class="content">
                <div class="content-body ">
<!--                    <el-checkbox-group v-model="jForm">-->
<!--                        <el-checkbox v-for="aa in auth" :label="aa.name" :key="aa.name">{{aa.name}}</el-checkbox>-->
<!--                    </el-checkbox-group>-->
                    <el-checkbox-group v-model="jForm" >
                        <el-checkbox-button v-for="aa in auth" :label="aa.name" :key="aa.name">{{aa.name}}</el-checkbox-button>
                    </el-checkbox-group>

<!--                    <el-form :model="jForm" label-width="80px">-->
<!--                        <el-form-item label="">-->
<!--                            <el-checkbox v-model="jForm.fanye" label="翻页及开启活动" true-label="1"></el-checkbox>-->
<!--                        </el-form-item>-->

<!--                        <el-form-item label="">-->
<!--                            <el-checkbox v-model="jForm.data" label="认购数据录入" true-label="4"></el-checkbox>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item>-->
<!--                            <el-checkbox v-model="jForm.prize" label="兑奖" true-label="2"></el-checkbox>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item>-->
<!--                            <el-checkbox v-model="jForm.message" label="消息审核" true-label="3" ></el-checkbox>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->


                </div>
                <div class="content-footer">
                    <el-button plain @click="permissionDialogVisible = false">关闭</el-button>
                    <el-button plain type="primary" @click="permissionSubmit">修改</el-button>
                </div>
            </div>
        </modal>

        <modal :visible="personDialogVisible" :width="850" @close="personDialogVisible = false" class="data-modal" title="添加管理员">

            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="扫码添加" name="scan">
                    <div class="content">
                        <div class="content-body ">
                            <el-row>
                                <el-col :span="10">
                                   <div class="content-canvas-code" style="position: relative">
                                       <canvas  v-if="showImageCode" id="canvasCode" style="height: 250px;width: 250px"></canvas>
                                       <el-image

                                               style="width: 250px; height: 250px"
                                               :src="url"
                                               alt="点击按钮生成二维码"
                                               @click="creatVMQRcode"
                                               fit="fill">
                                           <div slot="placeholder" class="image-slot">
                                               二维码生成中<span class="dot">...</span>
                                           </div>
                                           <div slot="error" class="image-slot">
<!--                                              <div> 请点击按钮生成二维码</div>-->
                                           </div>
                                       </el-image>
                                       <div class="content-image-down" @click="downImage"><i class="el-icon-download"></i></div>
                                   </div>
                                </el-col>
                                <el-col :span="12" style="height: 150px;line-height: 150px">
                                    <span v-if="!isLoging" style="font-size: 24px">
                                        <span v-if="url">请直接扫码添加,也可下载后发送给指定人员扫码</span>
                                        <span v-else>请点击按钮生成二维码</span>
                                    </span>
                                    <span v-else style="font-size: 24px">正在生成二维码，请稍后</span>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-switch
                                            v-model="allPermission"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"

                                            active-text="赋予全部权限">
                                    </el-switch>
                                </el-col>
                                <el-col :span="18" >
                                    <el-alert
                                            title="如果开关是打开的，则赋予全部权限，无论之后是否添加新功能"
                                            type="warning"
                                            ></el-alert>
                                    </el-col>
                            </el-row>

                            <el-row v-if="!allPermission">
<!--                                <el-col :span="12" style="font-size: small;">-->
<!--                                    <span>常规功能</span>-->
<!--                                </el-col>-->
<!--                                <el-col :span="12" style="font-size: small;">-->
<!--                                    <span>大屏滚动数据录入</span>-->
<!--                                </el-col>-->
                            </el-row>
                            <el-row v-if="!allPermission">

<!--                                <el-checkbox-group v-model="tForm" >-->
<!--                                    <el-checkbox-button v-for="aa in auth" :label="aa.name" :key="aa.name">{{aa.name}}</el-checkbox-button>-->
<!--                                </el-checkbox-group>-->
                                <div class="auth-user-body">
                                    <label> 选择权限：</label>
                                    <el-checkbox-group v-model="tForm" >
                                        <el-checkbox-button v-for="aa in auth" :label="aa.name" :key="aa.name">{{aa.name}}</el-checkbox-button>
                                    </el-checkbox-group>
                                </div>
<!--                                <el-col :span="12" style="font-size: small;">-->
<!--                                    <el-checkbox v-model="tForm.fanye" label="翻页及开启活动" true-label="1" @change="changeCanvasCode"></el-checkbox>-->
<!--                                </el-col>-->
<!--                                <el-col :span="12" style="font-size: small;">-->
<!--                                    <el-checkbox v-model="tForm.data" label="认购数据录入" true-label="4" @change="changeCanvasCode"></el-checkbox>-->
<!--                                </el-col>-->
                            </el-row>
<!--                            <el-row v-if="!allPermission">-->
<!--                                <el-col :span="18" style="font-size: small;">-->
<!--                                    <el-checkbox v-model="tForm.prize" label="兑奖" true-label="2" @change="changeCanvasCode"></el-checkbox>-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                            <el-row v-if="!allPermission">-->
<!--                                <el-col :span="18" style="font-size: small;">-->
<!--                                    <el-checkbox v-model="tForm.message" label="消息审核" true-label="3" @change="changeCanvasCode"></el-checkbox>-->
<!--                                </el-col>-->
<!--                            </el-row>-->
                        </div>
                        <div class="content-footer">
                            <el-button type="primary" :loading="isLoging" :disabled="isLoging" @click="creatVMQRcode">生成二维码</el-button>
                            <el-button plain @click="personDialogVisible = false">关闭</el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="账号添加" name="count">
                    <div class="content">
                        <div class="content-body ">
                            <el-form :inline="true" :model="fForm" class="search">
                                <el-form-item label="">
                                    <el-input v-model="fForm.userName" placeholder="请输入昵称" clearable></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" size="mini" class="search-btn" @click="searchAddPerson">查询</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="text" @click.stop="canNotFind">找不到用户？</el-button>
                                </el-form-item>

                            </el-form>

                            <div class="no-data"  v-if="tagsUsers.length === 0">
                                <img :src="noDataImg" alt="无数据" />
                                <!--                                <div>没有找到符合条件的数据</div>-->
                            </div>
                           <div v-else>
                               <div class="tag-user-body" >
                                   <el-tag
                                           v-for="tag in tagsUsers"
                                           :key="tag.ID"
                                           closable
                                           size="medium"
                                           effect="dark"
                                           @click="clickTag(tag)"
                                           @close="closeTag(tag)"
                                           :type="tag.ID">

                                       <img :src="tag.HEADIMGURL" class="avatar"  alt="头像"/>
                                       <span class="nickname">{{tag.NICKNAME}}</span>
                                   </el-tag>
                               </div>
                               <div class="auth-user-body">
                                   <label> 选择权限：</label>
                                   <el-checkbox-group v-model="aForm" @change="adminAuthStrChange">
                                       <el-checkbox-button v-for="aa in auth" :label="aa.name" :key="aa.name">{{aa.name}}</el-checkbox-button>
                                   </el-checkbox-group>

                               </div>
                               <div class="tag-user-result">
                                   <label>您已选择给用户：</label>
                                   <!--                                <div class="tag-user-result-content">-->
                                   <!--                                    <div v-for="tag in tagsUsers">-->
                                   <!--                                        <img :src="tag.HEADIMGURL" class="avatar"  alt="头像"/>-->
                                   <!--                                        <span class="nickname">{{tag.NICKNAME}}</span>-->
                                   <!--                                    </div>-->
                                   <!--                                </div>-->
                                   <el-tag
                                           v-for="tag in tagsUsers"
                                           :key="tag.ID"
                                           size="medium"
                                           effect="dark"
                                           :type="tag.ID">

                                       <img :src="tag.HEADIMGURL" class="avatar"  alt="头像"/>
                                       <span class="nickname">{{tag.NICKNAME}}</span>
                                   </el-tag>
                                   <label>赋予 </label>
                                   <span class="red">{{adminAuthStrString}}</span>个权限
                               </div>
                           </div>

<!--                            <el-checkbox-group v-model="checkboxGroup1">-->
<!--                                <el-checkbox-button v-for="city in cities" :label="city" :key="city" >{{city}}</el-checkbox-button>-->
<!--                            </el-checkbox-group>-->

<!--                            <el-form :model="aForm" label-width="1px">-->
<!--                                <el-form-item label="">-->
<!--                                    <el-checkbox v-model="aForm.fanye" label="翻页及开启活动" true-label="1"></el-checkbox>-->
<!--                                </el-form-item>-->

<!--                                <el-form-item label="">-->
<!--                                    <el-checkbox v-model="aForm.data" label="认购数据录入" true-label="4"></el-checkbox>-->
<!--                                </el-form-item>-->
<!--                                <el-form-item>-->
<!--                                    <el-checkbox v-model="aForm.prize" label="兑奖" true-label="2"></el-checkbox>-->
<!--                                </el-form-item>-->
<!--                                <el-form-item>-->
<!--                                    <el-checkbox v-model="aForm.message" label="消息审核" true-label="3"></el-checkbox>-->
<!--                                </el-form-item>-->
<!--                            </el-form>-->


                        </div>
                        <div class="content-footer">
                            <el-button plain @click="personDialogVisible = false">关闭</el-button>
                            <el-button plain type="primary" @click="personDialogSubmit">确定</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>



        </modal>

    </div>
</template>

<script>
    import avatar from '../../../../../assets/imgs/fj.jpg'
    import noDataImg from '../../../../../assets/imgs/no_data/no_data.png'
    import QRCode from 'qrcode';
    import moment from 'moment';

    export default {
        data() {
            return {
                sForm:{},
                pForm:{},
                jForm:[],
                tForm:[],
                fForm:{},
                aForm:[],
                noDataImg:noDataImg,
                tablePersonData: [
                    {
                        id:'100303',
                        profile: '--',
                        name: '小明',
                        index: '4',
                        prizeName:'--',
                        prize:'笔记本',
                        prizeNUm:1,
                        loginData:'2019-07-12',
                        creatDate:'2019-07-12'
                    }],
                allowScanToAdd: true,
                allPermission:true,
                personList: [
                    {
                        avatar: avatar,
                        name: "李寻欢",
                        id:'12422',
                        auth:'1,4',
                        //signInTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                        detail: [
                            {label: "地区", value: "上海 浦东新区"},
                            {label: "添加时间", value: "2019-10-11"},
                            {label: "登陆时间", value: "2019-10-11"},
                            {label: "权限", value: "全部"}
                        ]
                    }
                ],
                currentPage: 1,
                pageSize: 16,
                personListTotal:100,
                detailDialogVisible:false,
                permissionDialogVisible:false,
                personDialogVisible:false,
                messageInfo: {
                    data: []
                },
                awardInfo: {
                    data: []
                },
                activeName:'scan',
                showImageCode:null,
                authUpdateModel:[],
                checkList:[],
                tagsUsers:[],
                auth:[{name:'翻页及开启活动',value:1},{name:'认购数据录入',value:4},{name:'兑奖',value:2},{name:'消息审核',value:3}],
                authObj:{},
                authLabel:{},
                curAdminId:'',
                curAdmin:{},
                url:'',
                isLoging:false,
                adminAuthStrString: '0'
            }
        },
        watch: {
            // 如果 `allPermission` 发生改变，这个函数就会运行
            // allPermission: (newQuestion, oldQuestion)=> {
            //     this.changeCanvasCode()
            // },
            // tForm:(newQuestion, oldQuestion)=> {
            //     this.changeCanvasCode()
            // },
        },
        mounted(){
            //this.createImageCode('sfdfnosdfiodsiofjosjdfo')
            //this.refreshImageCode('sfdfnosdfiodsiofjosjdfo')

            this.auth.forEach(item=>{
                this.authObj[item.value] = item.name;
                this.authLabel[item.name] = item.value
            });
            let sceneId = this.$route.query.sceneId;
            this.fuzzyAdminUser({sceneidBigint:sceneId,userName:this.pForm.nickName})
        },
        methods: {
            searchPerson(){
                let sceneId = this.$route.query.sceneId;
                //this.adminList({sceneidBigint:8839865||sceneId,nickName:this.pForm.nickName})
                //模糊查询已存在互动管理员
                this.fuzzyAdminUser({sceneidBigint:sceneId,userName:this.pForm.nickName})
                //场景下所有管理员信息查询
                this.interAdminList({sceneidBigint:sceneId})
            },
            addPerson(){
                // 添加发放人,管理员
                this.personDialogVisible = true;
                //this.changeCanvasCode()
            },
            handleDeleteClick(row){
                if (row && row.id) {
                    this.tablePersonData = this.tablePersonData.filter(item=> item.id !== row.id)
                }
            },
            personSubmitDialog(){
                let id = this.tablePersonData[this.tablePersonData.length - 1].id;
                this.tablePersonData.push({
                    index: this.tablePersonData.length + 1,
                    id: +id + 1,
                    //creatDate: this.getNowFormatDate(),
                    name: this.pForm.name
                });
                this.personDialogVisible = false
            },
            openDetailDialog(person){
                this.detailDialogVisible = true
                this.interAdminDetail({adminId: person.adminId})

            },
            openPermissionDialog(person){
                this.permissionDialogVisible = true;
               // this.authUpdateModel = person.auth.split(',');
                // this.checkList = ['1','2','3']
                this.curAdminId = person.adminId;
                let jForm = [];
                person.adminAuthStr.split(',').forEach(item=>{
                    this.authObj[item]&& jForm.push(this.authObj[item])
                })
                this.jForm = jForm
               // this.jForm = person.adminAuthStr.split(',')
            },
            deleteItem(person){
                this.$confirm('确定执行此删除操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.interAdminDelete({adminId:person.adminId});
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            selectCard(){},
            changePage(){},
            permissionSubmit(){
                //修改权限的提交

                let adminAuthStr =[];
                this.jForm.forEach(item=>{
                    adminAuthStr.push(this.authLabel[item])
                });

                this.interAdminUpdate({
                    adminId:this.curAdminId,
                    adminAuthStr:adminAuthStr.join(',')
                });
                this.permissionDialogVisible = false
            },
            personDialogSubmit(){
                //账号添加
                let list = [];
                this.tagsUsers.forEach(function(item) {
                    list.push(item.ID)
                });

               // let adminAuthStr = _.values(this.aForm);
                let adminAuthStr = [];
                this.aForm.forEach(item=>{
                    this.authLabel[item] && adminAuthStr.push(this.authLabel[item])
                });
                if(adminAuthStr.length === 0){
                    this.$message({
                        type: 'info',
                        message: '请至少选择一种权限'
                    });
                    return
                }
                let sceneId = this.$route.query.sceneId;
                this.interAdminAdd({
                    sceneidBigint:sceneId,
                    adminAuthStr:adminAuthStr.join(','),
                    userIds: list.join(','),
                    code:''
                });
                this.personDialogVisible = false;
                this.tagsUsers.length = 0;
                this.aForm.length = 0
            },
            handleTabClick(){},
            changeCanvasCode(){
                this.$nextTick(() =>{
                   // let redirect_uri = 'https://show.life.cntaiping.com/staticmb/v/iXi9adVba2?logType=3&eqrcode=1&from=singlemessage&isappinstalled=0'
                    this.canvas = document.getElementById('canvasCode');
                    //应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），
                    // snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
                    //重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节，该值会被微信原样返回，我们可以将其进行比对，防止别人的攻击。
                    //let val = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
                    //let val = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
                    let val ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc6f6d08bdbe44fe7&redirect_uri='+ encodeURIComponent(redirect_uri)+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect'
                    //如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。


                    let str = 'a-';//adminAuthStr:''
                    if(this.allPermission){
                        str +='1,2,3,4'
                    }else{
                        this.tForm.forEach(item=>{
                           if( this.authLabel[item]){
                               str += this.authLabel[item]
                           }
                        });
                        //str += _.values(this.tForm).join(',')
                    }

                    let redirect_uri = location.href,
                        uri = redirect_uri.split('?'),
                        _uri = uri[0] + '/auth?' + uri[1],
                        APPID = 'wx46f03431c2b4f635'||"wxc6f6d08bdbe44fe7",
                        oauthUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                            APPID + "&redirect_uri=" + encodeURIComponent(_uri) +
                            "&response_type=code&scope=snsapi_userinfo&state="+str
                            +"#wechat_redirect";
                    QRCode.toCanvas(this.canvas, oauthUrl, function (error) {
                        console.log(error)
                    })
                })

            },
            creatVMQRcode(){
                var str = '';

                if(this.allPermission){
                    str +='1,2,3,4'
                }else{
                    this.tForm.forEach(item=>{
                        if( this.authLabel[item]){
                            str += this.authLabel[item]
                        }
                    });

                }
                // this.url = 'http://www.office2.cn/staticft/images/xcx/35/8839959m802429100000.png'

                if(str === ''){
                    this.$message.error('请至少选择一个权限');
                    return
                }
                this.isLoging = true;
                this.$api.post('/interAdmin/createVMQrcode',
                    {
                        sceneidBigint:this.$route.query.sceneId,
                        adminAuthStr:str,
                        qrtype:'2'
                    },
                    success => {
                        if(success){
                            //http://www.office2.cn/staticft/images/xcx/35/8839959m802429100000.png
                            this.url = 'http://www.office2.cn/staticft/images' +success
                            this.isLoging = false;
                        }
                    }, fal => {
                        this.isLoging = false;
                    },!1);// /dataft/
            },
            async refreshImageCode(text){
                try {
                    this.url = await QRCode.toDataURL(text)
                } catch (err) {
                    console.error(err)
                }
            },
            createImageCode(value){
                QRCode.toDataURL(value)
                    .then(url => {
                        this.url = url
                    })
                    .catch(err => {
                        console.error(err)
                    })
            },
            searchAddPerson(){
                let sceneId = this.$route.query.sceneId;
                this.getUserName({
                    sceneId:sceneId,
                    userName:this.fForm.userName
                })
            },
            canNotFind(){},
            clickTag(tag){

            },
            closeTag(tag){
                this.tagsUsers = this.tagsUsers.filter( item => item.ID !== tag.ID )
            },
            downImage(){
                this.downloadImage('','werererjio')
            },
            downloadImage(imgsrc, name) {
                let image = new Image();
                // img.setAttribute('crossOrigin', 'anonymous');
                image.setAttribute("crossOrigin", "anonymous");
                // let url = this.canvas.toDataURL("image/png");
                image.onload = function() {
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.download = "扫码加管理员" ||name; // 设置图片名称
                    a.href = this.url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };

                let timeStamp = +new Date();
                image.src = this.url+'?'+timeStamp;
            },
            adminList(param){
                //场景下，活动奖励奖品
                this.$api.post('/winUser/adminList',
                    param,
                    success => {
                        if(success){
                            this.personList = success
                        }
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            fuzzyAdminUser(param){
                //模糊查询已存在互动管理员
                this.$api.post('/interAdmin/fuzzyAdminUser',
                    param,
                    success => {
                        if(success){
                            this.personList = success.map(person=>{
                                person.detail = [];
                                if(person.adminAuthStr){
                                    let adminAuthStr = person.adminAuthStr.split(',').map(item=>{
                                       return this.authObj[item]
                                    })
                                    //moment(item.orderTime).format("YYYY-MM-DD")
                                    person.detail.push({label:'最后登录时间',value:moment(person.lastModified).format("YYYY-MM-DD")})
                                    person.detail.push({label:'权限',value:adminAuthStr})
                                }
                                return person
                            })
                            this.personListTotal =  this.personList.length
                        }
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            interAdminList(param){
                 //场景下所有管理员信息查询
                this.$api.post('/interAdmin/list',
                    param,
                    success => {
                        if(success){

                        }
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            interAdminAdd(param){
                //场景下管理员新增
                this.$api.get('/interAdmin/add',
                    param,
                    success => {
                        this.searchPerson()
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            interAdminUpdate(param){
                //场景下管理员修改
                this.$api.get('/interAdmin/update',
                    param,
                    success => {
                        this.searchPerson()
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            interAdminDelete(param){
                //场景下管理员删除
                this.$api.get('/interAdmin/del',
                    param,
                    success => {
                        this.searchPerson()
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            getUserName(param){
                //场景下，普通用户模糊查询
                this.$api.post('/preset/fuzzyQueryUser',
                    param,
                    success => {
                        if(success){
                        this.tagsUsers = success.map(item=>{
                            item.HEADIMGURL = item.HEADIMGURL || 'imgs/fj.jpg'
                            return item
                        })
                        }
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/

            },
            interAdminDetail(param){
                //场景下当前管理员详情信息查询
                this.$api.get('/interAdmin/detail',
                    param,
                    success => {
                        if(success){
                            this.curAdmin.saveMountUserNum = success.saveMountUserNum
                            this.curAdmin.examCount = success.examCount;//
                            this.curAdmin.cashCount = success.cashCount
                        }
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            },
            wxAuthorize(){
                let redirect_uri = location.href,
                    APPID = "wxc6f6d08bdbe44fe7",
                    oauthUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + APPID + "&redirect_uri=" +
                        encodeURIComponent(redirect_uri) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
                //https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
                //snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），
                // snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息
                //#wechat_redirect 直接在微信打开链接，可以不填此参数。做页面302重定向时候，必须带此参数
                if (redirect_uri.indexOf("?code=") > -1 || redirect_uri.indexOf("&code=") > -1) {
                    let str;
                    if (redirect_uri.indexOf("?code=") > -1) {
                        str = redirect_uri.substring(redirect_uri.indexOf("?code=")).split("&")[0];
                    } else if (redirect_uri.indexOf("&code=") > -1) {
                        str = redirect_uri.substring(redirect_uri.indexOf("&code=") + 1).split("&")[0];
                    }
                    let wxCode = str.substring(str.indexOf("=") + 1)
                    // alert("wxCode=" + wxCode);
                    let sceneId = this.$route.query.sceneId;
                    this.interAdminAdd({
                        sceneidBigint:sceneId,
                        adminAuthStr:'',
                        userIds:'',
                        code: wxCode})

                }else{
                    window.location.replace(oauthUrl);
                }
            },
            adminAuthStrChange(){
                //选择权限
                if(this.aForm.length){
                    this.adminAuthStrString = this.aForm.join(',')+ " "+this.aForm.length
                }else{
                    this.adminAuthStrString = '0'
                }

            }
        }
    }
</script>

<style lang="scss">

    .interact-admin{
        width: 100%;
        height: 100%;
        .container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: row;
            flex-wrap: wrap;

            .el-card {
                width: 220px;
                min-height: 300px;
                margin-right: 30px;
                margin-bottom: 30px;
                position: relative;
                overflow: visible;
                .card-header{
                    line-height: 30px;
                    &>.el-col:first-child {
                        display: flex;
                    }

                    .avatar {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                    }

                    .nickname {
                        margin-left: 10px;
                        font-size: 12px;
                    }
                }

                .card-content {
                    margin: 10px 0;
                    min-height: 210px;

                    .content-row {
                        margin: 5px 0;

                        .content-label {
                            font-weight: normal;
                            font-size: 14px;
                        }

                        .content-info {
                            display: inline;
                            font-size: 14px;
                            word-break: break-all;
                        }
                    }
                }

                .card-footer {
                    text-align: center;

                    .devide-line {
                        display: inline-block;
                        vertical-align: middle;

                        &::after {
                            content: " ";
                            width: 1px;
                            border-left: 1px solid #ccc;
                        }
                    }
                }



                .el-card__body {
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                }
            }
        }


        .no-data{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .data-modal {
            .content {
                padding: 20px;
                .content-body{
                    &.flex{
                        display: flex;
                        justify-content: space-around;
                        .box-card{
                            h2{
                                color: #1994fa;
                                text-align: center;
                            }
                        }
                    }
                    .el-row{
                        margin: 10px;
                    }
                    .content-canvas-code{
                       .content-image-down{
                           display: flex;
                           flex-direction: column;
                           position: absolute;
                           bottom: 0;
                           width: 250px;
                           height: 70px;
                           background: #e0e3ec;
                           opacity: 0;
                           &:hover{
                               cursor: pointer;
                               transition: .3s;
                               opacity: 0.9;
                           }
                           i{
                               font-size: 36px;
                               align-self: center;
                           }
                        }
                    }

                }

                .content-footer {
                    text-align: center;
                    margin-top: 20px;
                    .el-button {
                        padding-left: 30px;
                        padding-right: 30px;
                    }
                }
            }

            //.el-tag+.el-tag{margin-left: 10px;}
        }

        .pagination-part{
            text-align: center;
        }
        .tag-user-body{
            display: flex;
            flex-flow: wrap;
            line-height: 32px;
            margin: 10px auto;
            &>span{
                margin: 5px;
                display: flex;
                align-items: center;
                img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    position: relative;
                    left: -5px;
                }
                i{
                    height: 28px;
                    line-height: 28px;
                    width: 28px;
                }
            }

        }
        .auth-user-body{
            display: flex;
            line-height: 32px;
            margin: 10px auto;
        }

        .tag-user-result{
            display: flex;
            flex-flow: wrap;
            line-height: 32px;

            &>span{
                margin-right: 4px;
                display: flex;
                align-items: center;
                img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    position: relative;
                    left: -5px;
                }
                i{
                    height: 28px;
                    line-height: 28px;
                    width: 28px;
                }
            }
            .red{
                color: red;
            }

        }
    }


</style>